.p-score {
  .content {
    height: calc(100vh - 168px - 2.5rem);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;

    .top {
      height: 30%;
      display: flex;
      gap: 2.5rem;
      font-family: 'msyhbd';
      font-size: 3rem;
      color: #fff;

      .top-left {
        width: 25%;
        display: flex;
        gap: 2.5rem;

        .common {
          flex: 1;
          height: calc(50% - 1.25rem);
          border-radius: 0.75rem;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .order {
          background: linear-gradient(to bottom, #1698e0, #1d3ccf);
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }

        .delegation {
          background-image: url('@/assets/img/scb/score-order-bg.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }

      .top-center {
        width: calc(50% - 5rem);
        display: flex;
        flex-direction: column;
        gap: 2.5rem;

        .center-common {
          display: flex;
          align-items: center;
          width: 100%;
          height: calc(50% - 1.25rem);
          border-radius: 0.75rem;
          padding-left: 0.5rem;
          box-sizing: border-box;
        }

        .name {
          background-image: url('@/assets/img/scb/bg-line2.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          padding-left: 1rem;
        }

        .horseName {
          background-image: url('@/assets/img/scb/bg-line2.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          color: #FFFF00;
          padding-left: 1rem;
        }
      }

      .top-right {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
        gap: 2.5rem;

        .allow-time {
          background-image: url('@/assets/img/scb/score-bg.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          border-radius: 0.75rem;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          height: calc(50% - 1.25rem);
        }
      }
    }
  }

  .bottom {
    height: calc(70% - 3.75rem);
    display: flex;
    gap: 2.5rem;
    color: #fff;
    font-size: 3rem;
    font-family: 'msyhbd';

    .bottom-left {
      width: 40%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11rem;
      border-radius: 0.75rem;
      background-image: url('@/assets/img/scb/bg-line2.png');
    }

    .bottom-right {
      width: 60%;
      display: flex;
      gap: 2.5rem;
      color: #fff;
      font-size: 3rem;
      font-family: 'msyhbd';
      height: 100%;

      .left {
        width: 30%;
        height: 100%;
        gap: 2.5rem;
        display: flex;
        flex-direction: column;

        .text1 {
          width: 100%;
          height: 30%;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 0.75rem;
          background-image: url('@/assets/img/scb/bg-line2.png');
        }

        .text2 {
          width: 100%;
          height: 30%;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 0.75rem;
          background-image: url('@/assets/img/scb/bg-line2.png');
        }

        .score {
          width: 100%;
          height: 40%;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 0.75rem;
          font-size: 6rem;
          // background-image: url('@/assets/img/scb/bg-line2.png');
        }
      }

      .right {
        width: 70%;
        display: flex;
        flex-direction: column;
        gap: 2.5rem;

        .right-top {
          height: 30%;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 0.75rem;
          background-image: url('@/assets/img/scb/bg-line2.png');
        }

        .right-center {
          height: 30%;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 2.5rem;

          .text {
            height: 100%;
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.75rem;
            background-image: url('@/assets/img/scb/bg-line2.png');
          }
        }

        .right-bottom {
          height: 40%;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 2.5rem;

          .text {
            height: 100%;
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.75rem;
            font-size: 6rem;
            // background-image: url('@/assets/img/scb/bg-line2.png');
          }
        }
      }
    }
  }
}